<!-- 统计卡片 -->
<template>
  <a-row :gutter="16">
    <a-col :lg="6" :md="12" :sm="24" :xs="24">
      <a-card class="analysis-chart-card" :bordered="false">
        <div class="ele-text-secondary ele-cell">
          <div class="ele-cell-content">昨日订单</div>
          <a-tooltip title="指标说明">
            <question-circle-outlined />
          </a-tooltip>
        </div>
        <h1 class="analysis-chart-card-num">{{dayNums[1].num}}</h1>
        <div class="analysis-chart-card-content" style="padding-top: 16px">
          <a-space size="middle">
            <!-- <span class="analysis-trend-text">
              周同比12% <caret-up-outlined class="ele-text-danger" />
            </span> -->
            <span class="analysis-trend-text">
              日同比{{dayNums[1].num - dayNums[0].num}}单 
              <caret-up-outlined v-if="(dayNums[1].num >= dayNums[0].num)" class="ele-text-danger" />
              <caret-down-outlined v-else class="ele-text-success" />
            </span>
          </a-space>
        </div>
        <!-- <a-divider />
        <div>日销售额 ￥12,423</div> -->
      </a-card>
    </a-col><a-col :lg="6" :md="12" :sm="24" :xs="24">
      <a-card class="analysis-chart-card" :bordered="false">
        <div class="ele-text-secondary ele-cell">
          <div class="ele-cell-content">今日订单</div>
          <!-- <a-tooltip title="指标说明">
            <question-circle-outlined />
          </a-tooltip> -->
        </div>
        <h1 class="analysis-chart-card-num">{{dayNums[2].num}}</h1>
        <div class="analysis-chart-card-content" style="padding-top: 16px">
          <a-space size="middle">
            <!-- <span class="analysis-trend-text">
              周同比12% <caret-up-outlined class="ele-text-danger" />
            </span> -->
            <span class="analysis-trend-text">
              日同比{{dayNums[2].num - dayNums[1].num}}单 
              <caret-up-outlined v-if="(dayNums[2].num >= dayNums[1].num)" class="ele-text-danger" />
              <caret-down-outlined v-else class="ele-text-success" />
            </span>
          </a-space>
        </div>
        <!-- <a-divider />
        <div>日销售额 ￥12,423</div> -->
      </a-card>
    </a-col>
    <a-col :lg="6" :md="12" :sm="24" :xs="24">
      <a-card class="analysis-chart-card" :bordered="false">
        <div class="ele-text-secondary ele-cell">
          <div class="ele-cell-content">明日订单</div>
          <!-- <a-tooltip title="指标说明">
            <question-circle-outlined />
          </a-tooltip> -->
        </div>
        <h1 class="analysis-chart-card-num">{{dayNums[3].num}}</h1>
        <div class="analysis-chart-card-content" style="padding-top: 16px">
          <a-space size="middle">
            <!-- <span class="analysis-trend-text">
              周同比12% <caret-up-outlined class="ele-text-danger" />
            </span> -->
            <span class="analysis-trend-text">
              日同比{{dayNums[3].num - dayNums[2].num}}单 
              <caret-up-outlined v-if="(dayNums[3].num >= dayNums[2].num)" class="ele-text-danger" />
              <caret-down-outlined v-else class="ele-text-success" />
            </span>
          </a-space>
        </div>
        <!-- <a-divider />
        <div>日销售额 ￥12,423</div> -->
      </a-card>
    </a-col>
    <a-col :lg="6" :md="12" :sm="24" :xs="24">
      <a-card class="analysis-chart-card" :bordered="false">
        <div class="ele-text-secondary ele-cell">
          <div class="ele-cell-content">本月订单</div>
          <!-- <a-tooltip title="指标说明">
            <question-circle-outlined />
          </a-tooltip> -->
        </div>
        <h1 class="analysis-chart-card-num">{{monthNums[1].num}}</h1>
        <div class="analysis-chart-card-content" style="padding-top: 16px">
          <a-space size="middle">
            <!-- <span class="analysis-trend-text">
              周同比12% <caret-up-outlined class="ele-text-danger" />
            </span> -->
            <span class="analysis-trend-text">
              日同比{{monthNums[1].num - monthNums[0].num}}单 
              <caret-up-outlined v-if="(monthNums[1].num >= monthNums[0].num)" class="ele-text-danger" />
              <caret-down-outlined v-else class="ele-text-success" />
            </span>
          </a-space>
        </div>
        <!-- <a-divider />
        <div>日销售额 ￥12,423</div> -->
      </a-card>
    </a-col>
    
  </a-row>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue/es';
import {
  QuestionCircleOutlined,
  CaretUpOutlined,
  CaretDownOutlined
} from '@ant-design/icons-vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { getPayNumList } from '@/api/dashboard/analysis';
import useEcharts from '@/utils/use-echarts';
import { listDayNum, listMonthNum, listDockNum } from '@/api/order/dashBoard';

import dayjs from 'dayjs';

let date1 = dayjs().add(-2, 'day').format('YYYY-MM-DD')
let date2 = dayjs().add(1, 'day').format('YYYY-MM-DD')
let dayNums  = ref([{num: 0, date:'tt'},{num: 0, date:'aa'}, {num: 1, date: 'bb'}, {num: 2, date: 'cc'}])
listDayNum({ date1, date2}).then(msg => {
  dayNums.value=msg
}).catch((e) => {
})
let monthNums  = ref([{num: 0, date:'tt'},{num: 0, date:'aa'}, {num: 1, date: 'bb'}, {num: 2, date: 'cc'}])
listMonthNum({ date1: dayjs().format('YYYY-MM-DD')}).then(msg => {
  monthNums.value=msg
}).catch((e) => {
})

</script>

<style lang="less" scoped>
.analysis-chart-card {
  :deep(.ant-card-body) {
    padding: 16px 22px 12px 22px;
  }

  :deep(.ant-divider) {
    margin: 12px 0;
  }
}

.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  height: 40px;
}

.analysis-trend-text {
  white-space: nowrap;
}
</style>
